<template>
	<HeaderNav active-index="2"></HeaderNav>
	<TaskContainer>
		<div class="task-extra-cards">
			<el-card v-for="(task, index) in tasks" :key="index" class="task-card" shadow="hover">
				<div class="task-header">
					<h3 class="task-title">{{ task.title }}</h3>
					<el-button type="primary" size="small" class="reset-button" @click="handler(task.id)">重置任务</el-button>
				</div>
				<div class="task-details">
					<el-descriptions :column="3" border>
						<el-descriptions-item label="难易程度">{{ task.completed }}</el-descriptions-item>
						<el-descriptions-item label="编程语言">{{ task.langName }}</el-descriptions-item>
						<el-descriptions-item label="模块名称">{{ task.module }}</el-descriptions-item>
						<el-descriptions-item label="学生名单">
							<el-tag v-for="(student, index) in task.students" :key="index" :style="{ backgroundColor: student.color, color: getTextColor(student.color) }">
								{{ student.name }}
							</el-tag>
						</el-descriptions-item>
					</el-descriptions>
				</div>
			</el-card>
		</div>

	</TaskContainer>
	<Footor></Footor>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import Footor from '@/components/Footor.vue'
import API from "@/api/index.js"

export default {
	components: {
		HeaderNav,
		TaskContainer,
		Footor,
	},
	data() {
		return {
			tasks: [],
		}
	},
	methods: {
		getRandomColor() {
			const letters = '0123456789ABCDEF';
			let color = '#';
			for (let i = 0; i < 6; i++) {
				color += letters[Math.floor(Math.random() * 16)];
			}
			return color;
		},
		getTextColor(bgColor) {
			const color = bgColor.substring(1); // remove #
			const rgb = parseInt(color, 16); // convert rrggbb to decimal
			const r = (rgb >> 16) & 0xff; // extract red
			const g = (rgb >> 8) & 0xff; // extract green
			const b = (rgb >> 0) & 0xff; // extract blue
			const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
			return luma < 140 ? '#FFFFFF' : '#000000'; // return white or black
		},
		handler(taskId) {
			this.$layer.confirm("您确定要重置该任务吗", index => {
				// 获取当前任务的学生ID列表
				const task = this.tasks.find(t => t.id === taskId)
				const studentIds = task.students.map(s => s.id)  // 假设学生有id字段

				API.reset_task({ task_id: taskId, student_ids: studentIds }).then(res => {
				this.$layer.msg(res.message);
				this.fetchTasks();
				}).catch(err => {
				console.error("重置任务请求出错：", err);
				})
				this.$layer.close(index);
			})
		},
		fetchTasks() {
			API.need_explain().then(res => {
				this.tasks = res.map(task => ({
					...task,
					students: task.students.map(s => ({
						...s,
						color: this.getRandomColor(),
					}))
				}))
			}).catch(err => {
				console.error('获取任务失败：', err)
			})
		}
	},
	mounted() {
		this.fetchTasks()
	}
}
</script>

<style scoped>
.task-extra-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	padding: 0 50px;
}

.task-card {
	flex: 1 1 calc(33.333% - 40px); /* 每行展示3个任务 */
	box-sizing: border-box;
	transition: transform 0.3s, box-shadow 0.3s;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	overflow: hidden;
}

.task-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.task-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.task-title {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* 限制为3行 */
	-webkit-box-orient: vertical;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.reset-button {
	margin-left: 20px; /* 增加左边距 */
	background: rgba(74, 128, 255, 0.1);
	color: #4a80ff;
}

.task-details {
	margin-top: 10px;
	padding: 10px 20px;
}

.el-tag {
	margin: 2px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}
</style>